<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props的基本使用</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <!-- 引入 prop-type -->
    <script src="../js/prop-types.js"></script>
</head>

<body>
    <div id="app"></div>
    <div id="app1"></div>
    <div id="app2"></div>

    <script type="text/babel">
        class Person extends React.Component{
            state = {}
            
            static propTypes = {
                name: PropTypes.string.isRequired,
                age: PropTypes.number,
                sex: PropTypes.string
            }
            static defaultProps = {
                age: 18
            }
            render(){
                let {name, age, gender} = this.props
                return (
                    <ul>
                        <li>name: {name}</li>
                        <li>age: {age}</li>
                        <li>gender: {gender}</li>
                    </ul>
                )
            }
        }

        ReactDOM.render(<Person name='lucy' age='46' gender='women'/>,document.querySelector('#app'))

        const data = {
            name: 'Andy',
            age: 56,
            gender: 'man'
        }

        ReactDOM.render(<Person {...data}/>,document.querySelector('#app1'))
        ReactDOM.render(<Person name='Lucy' gender='women'/>,document.querySelector('#app2'))
    </script>
</body>

</html>